<template>
  <div class="park-list-wrapper">
    <div class="content" :class="{ 'content-hidden': !isOpen }">
      <div class="content-title">
        <span>园区列表</span>
        <svg-icon
          v-if="hasReset"
          name="refresh"
          size="17px"
          @click="handleChangePark({ pkid: '' })"
        />
      </div>
      <div class="content-list">
        <div
          class="content-list-item"
          :class="{ active: item.pkid === activePark }"
          v-for="(item, index) of listData"
          :key="index"
          @click="handleChangePark(item)"
        >
          {{ item.name }}
        </div>
      </div>
    </div>
    <div class="button" @click="isOpen = !isOpen">
      <el-icon v-if="isOpen">
        <ArrowLeft color="#ffffff" :size="7" />
      </el-icon>
      <el-icon v-else>
        <ArrowRight color="#ffffff" :size="7" />
      </el-icon>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted, watch } from 'vue'
import { ArrowRight, ArrowLeft } from '@element-plus/icons-vue'
import { parkPageList } from '@/api/manager/dataManage/park'
const props = defineProps({
  hasHidden: {
    type: [String, Number],
    default: '',
  },
  hasReset: {
    type: Boolean,
    default: true,
  },
  current: {
    type: String,
  },
})
const isOpen = ref(true)
const listData = ref([])
const initListData = async () => {
  const res = await parkPageList({
    pageIndex: 1,
    pageSize: 9999,
    enable: '1',
    hasHidden: props.hasHidden || undefined,
  })
  listData.value = res.data.list
  // 不能重置时默认选中第一个
  if (!props.hasReset && res.data.list.length > 0) {
    handleChangePark(res.data.list[0])
  }
}
const emit = defineEmits(['change'])
const activePark = ref('')
const handleChangePark = (val) => {
  activePark.value = val.pkid
  emit('change', activePark.value)
}
watch(
  () => props.current,
  () => {
    if (props.current) {
      activePark.value = props.current
    }
  },
)
onMounted(() => {
  initListData()
})
</script>
<style lang="scss" scoped>
.park-list-wrapper {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-right: 6px;
  .content {
    width: 220px;
    height: 100%;
    background-color: #ffffff;
    overflow: hidden;
    transition: width 0.5s;
    box-shadow: 0px 0px 10px 0px rgba(72, 121, 238, 0.1);
    border-radius: 4px;
    &-title {
      width: 220px;
      height: 50px;
      box-sizing: border-box;
      border-bottom: 1px solid #d5deed;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 15px 0 30px;
      span {
        font-size: 16px;
        font-weight: 500;
        color: #000000;
      }
      .svg-icon {
        cursor: pointer;
      }
    }
    &-list {
      width: 220px;
      height: calc(100% - 50px);
      overflow-y: auto;
      box-sizing: border-box;
      // padding: 10px 0;
      &-item {
        width: 100%;
        height: 50px;
        box-sizing: border-box;
        padding-left: 40px;
        display: flex;
        align-items: center;
        font-size: 14px;
        font-weight: 400;
        color: #333333;
        cursor: pointer;
        &.active {
          background-color: #e2ebfd;
          color: #507fef;
        }
      }
    }
  }
  .content-hidden {
    width: 0px;
    transition: width 0.5s;
  }
  .button {
    cursor: pointer;
    width: 14px;
    height: 56px;
    background: #d5deed;
    display: flex;
    align-items: center;
    position: relative;
    &::before {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      width: 0;
      height: 0;
      border-bottom: 14px solid #f3f7fe;
      border-left: 14px solid transparent;
    }
    &::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 0;
      height: 0;
      border-top: 14px solid #f3f7fe;
      border-left: 14px solid transparent;
    }
  }
}
</style>
